<template>
	<Popup
		title="上传改造成果"
		btnText="发布成果"
		@clickBtn="onclickPublish"
		@close="$emit('close')"
	>
		<div class="upload">
			<Textarea
				placeholder="说说你的改造感想吧～"
				height="160"
				v-model="intro"
			/>
			<ChooseFile
				class="choose-file"
				@change="selectFile"
			>
				<Tag
					width="200px"
					height="200px"
					bgColor="#FBFBFB"
					color="#00C9A9"
					border="3px solid #00C9A9"
					padding="0"
				>
					<div v-if="!selectImgSrc">
						<Iconfont
							name="icon-a-Group2"
							size="50"
							color="#00C9A9"
						/>
						<div style="margin-top: 21px;">上传图片/视频</div>
					</div>
					<img
						v-else
						:src="selectImgSrc"
					>
				</Tag>
			</ChooseFile>
		</div>
	</Popup>
</template>

<script>
import { setMyAchievement } from '@/api/course'
import { fileToBase64 } from '@/utils/file'
export default {
  data() {
    return {
      intro: '',
      selectImgSrc: null
    }
  },
  methods: {
    async selectFile(e) {
      this.selectImgSrc = await fileToBase64(e[ 0 ])
    },
    onclickPublish() {
      setMyAchievement({
        courseId: this.$route.query.id,
        url: this.selectImgSrc
      })
      this.$emit('nextStep')
    }
  }
}
</script>

<style lang='scss' scoped>
.upload {
  width: 700px;
  padding: 50px 50px 0 50px;

  .choose-file {
    margin-top: 40px;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: $rSmall;
    }
  }
}
</style>
